<template>
  <div class="socialMediaDashboard">
    <div class="dashboardHeader">OverallPerformance</div>
    <div class="chartWrapper">
      <PieChart
        :option="performanceOption"
        :height="'1.3264rem'"
        :width="'2.25rem'"
      ></PieChart>
    </div>
  </div>
</template>

<script>
import PieChart from "@components/common/PieChart.vue";
export default {
  components: {
    PieChart,
  },
  data() {
    return {
      mediaSwitch: true,
      performanceOption: {
        legend: {
          // 图例  标注各种颜色代表的模块
          orient: "horizontal", // 关键：改为水平布局
          left: "0%",
          bottom: "0%",
          icon: "paging",
          itemWidth: 30, // 图例颜色块的宽度和高度
          itemHeight: 5,
          itemGap: 20, // 图例之间的间距
          borderWidth: 0, // 图例边框线宽
          padding: [0, 0, 0, 0],
          data: ["Positive", "Neutral", "Negative"], // 与 series.data.name 一致
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "40%",
            style: {
              text: "9.23",
              textAlign: "center",
              fill: "#000",
              fontSize: 24,
              fontWeight: "700",
            },
          },
          // 第二个 graphic 元素，显示第二行文字
          {
            type: "text",
            left: "center",
            top: "55%",
            style: {
              text: " Performance",
              textAlign: "center",
              fill: "#8F8F8F", // 改变文字颜色
              fontSize: 12, // 改变文字大小
              fontWeight: "600",
            },
          },
        ],
        series: [
          {
            name: "Access From",
            type: "pie",
            top: "0%",
            left: "0%",
            bottom: "10%",
            radius: ["70%", "90%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 15,
              borderColor: "#fff",
              borderWidth: 10,
            },
            label: {
              show: true,
              formatter: function (params) {
                return ` ${Math.floor(params.percent)}%`;
              },
              position: "outside",
              padding: [0, -30],
              style: {
                color: "#000 !important", // 使用 !important 强制应用颜色样式
                fontSize: 12,
                fontWeight: "normal",
              },
            },
            labelLine: {
              show: false,
              labelStyle: {
                color: "#000 !important", // 也可以在这里设置 labelLine 的颜色样式
                fontSize: 12,
                fontWeight: "normal",
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
                color: "#000",
              },
            },
            data: [
              { value: 300, name: "Neutral", itemStyle: { color: "#8F8F8F" } },
              { value: 300, name: "Negative", itemStyle: { color: "#CE4049" } },
              { value: 600, name: "Positive", itemStyle: { color: "#2FAA68" } },
            ],
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.socialMediaDashboard {
  height: 1.8264rem;
  position: relative;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  // justify-content: space-between;
  padding: 24px;
  border-radius: 0.0556rem;
  border: 1px solid #cdcccc;
}

.dashboardHeader {
  font-size: 16px; /* 假设需要调整字体大小 */
  font-weight: 600;
  color: #232323;
}

.chartWrapper {
  /* 移除绝对定位，改用弹性布局 */
  flex: 1;
  max-width: 60%; /* 示例：限制图表最大宽度 */
  margin-left: 24px; /* 与标题的间距 */
}
</style>
